import React from 'react';
import * as PropTypes from 'prop-types';
import styles from './style/index.less';
import Iconfont from 'components/Iconfont';

class Fill extends React.Component {
  static defaultProps = {
    dataSource: {},
    columns: [],
    colorful: false
  }

  render() {
    const { columns, className, dataSource } = this.props;
    
    return (
      <div className={`${styles.Fill} clearfix`}>
        {
          columns.map((ele,index) =>{
            const { unit, icon, field, label } = ele;
            return (
            <div key={index} className={`${styles.items} ${styles[className]}`}>
              {icon ? <div className={styles.icon}><Iconfont type={icon} /></div>: null}
              <div className={styles.inner}>
                <div className={styles.num}>{(dataSource[field] || dataSource[field] === 0) ? dataSource[field]: '--'}</div>
                <div className={styles.text}>{label} ({unit})</div>
              </div>
            </div>)
          })
        }
      </div>
    );
  }
}

Fill.propTypes = {
  columns: PropTypes.array,
  colorful: PropTypes.bool,
  icon: PropTypes.string,
}

export default Fill;